<?php /** @noinspection PhpUndefinedVariableInspection */ ?>
<?php ?>
<style>
    .app-debug-trace {
        display: none;
        position: fixed;
        bottom: 0;
        width: 100%;
        left: 0;
        background: #ffffff;
        height: 240px;
        border-top: 2px solid #dc322f;
        font-size: 14px;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        z-index: 999;
    }

    .app-debug-close {
        position: absolute;
        right: 15px;
        top: 5px;
        cursor: pointer;
    }

    .app-debug-trace-tab {
        list-style: none;
        padding: 0;
        margin: 0;
        height: 35px;
        line-height: 35px;
        box-sizing: border-box;
        font-size: 15px;
        font-weight: bold;
    }

    .app-debug-trace-tab li {
        display: inline-block;
        padding: 0 10px;
        cursor: pointer;
    }

    .app-debug-trace-tab li.active {
        color: #dc322f;
    }

    .app-debug-trace-tab li:hover {
        background: #f8f8f8;
    }

    .app-debug-trace-item {
        display: none;
        height: 205px;
        overflow-y: auto;
    }

    .app-debug-trace-item[data-toggle="1"] {
        display: block;
    }

    .app-debug-trace-item ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .app-debug-trace-item ul li {
        line-height: 25px;
        border-bottom: 1px solid #f8f8ff;
        padding: 0 10px;
        font-size: 14px;
    }

    .app-debug-trace-item ul li span {
        font-size: 10px;
        background: #efefef;
        color: #dc322f;
        padding: 0 5px;
        margin-right: 5px;
        border-radius: 3px;
        height: 20px;
        line-height: 20px;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    }

    .app-debug-mini {
        display: none;
        position: fixed;
        bottom: 10px;
        right: 10px;
        cursor: pointer;
        color: #dc322f;
        z-index: 999;
    }
</style>
<div class="app-debug-mini app-debug-open">
    <?= $trace['time'] ?>&nbsp;
    <?= $trace['memory'] ?>
</div>
<div class="app-debug-trace">
    <ul class="app-debug-trace-tab">
        <li data-toggle="1" class="active">基本</li>
        <li data-toggle="2">自动加载</li>
        <li data-toggle="3">SQL</li>
    </ul>
    <div class="app-debug-close">最小化</div>
    <div class="app-debug-trace-item" data-toggle="1">
        <ul>
            <li>运行时间: <?= $trace['time'] ?></li>
            <li>使用内存: <?= $trace['memory'] ?> </li>
            <li>自动加载文件: <?= count($runtime['include']) ?> </li>
            <li>执行SQL: <?= count($runtime['sql'] ?? []) ?> </li>
        </ul>
    </div>
    <div class="app-debug-trace-item" data-toggle="2">
        <ul>
            <?php foreach ($runtime['include'] ?? [] as $file): ?>
                <li><?= $file ?>(<?= round(filesize($file) / 1024,1) ?>KB)</li>
            <?php endforeach; ?>
        </ul>
    </div>
    <div class="app-debug-trace-item" data-toggle="3">
        <ul>
            <?php foreach ($runtime['sql'] ?? [] as $sql): ?>
                <?php if ($sql['type'] == 0): ?>
                    <li><span>prepare</span><?= $sql['data'] ?></li>
                <?php elseif ($sql['type'] == 1): ?>
                    <li><span>execute</span><?= var_export($sql['data']) ?></li>
                <?php endif; ?>
            <?php endforeach; ?>
        </ul>
    </div>
</div>
<script>
    var tabs = document.querySelectorAll(".app-debug-trace-tab li");

    function getCookie(name) {
        var cookieArray = document.cookie;  //获取cookie存储字符串
        var arr = cookieArray.split(';');   //将获得的cookie字符串以；分割开获得单独每个cookie名/值对
        for (var i = 0; i < arr.length; i++) {
            var arr1 = arr[i].split("=");     //将名/值对以“=”分割开
            if (arr1[0].trim() === name) {
                return arr1[1];  //如果名为name,则结果result为名对应的值
            }
        }
        return null;
    }

    function debug_toggle(index) {
        var panel = document.querySelectorAll(".app-debug-trace-item[data-toggle]");
        for (var j = 0; j < panel.length; j++) {
            panel[j].style.display = "none";
        }
        document.querySelector(".app-debug-trace-item[data-toggle='" + index + "']").style.display = "block";
        document.querySelector(".app-debug-trace-tab li.active").classList.remove('active');
        document.querySelector(".app-debug-trace-tab li[data-toggle='" + index + "']").classList.add('active');
    }


    document.querySelector('.app-debug-close').onclick = function () {
        document.querySelector('.app-debug-trace').style.display = 'none';
        document.querySelector('.app-debug-mini').style.display = 'block';
        document.cookie = "paper_debug_close=1;path=/";
    }

    document.querySelector('.app-debug-open').onclick = function () {
        document.querySelector('.app-debug-trace').style.display = 'block';
        document.querySelector('.app-debug-mini').style.display = 'none';
        document.cookie = "paper_debug_close=0;path=/";
    }

    for (var i = 0; i < tabs.length; i++) {
        tabs[i].onclick = function (event) {
            const e = event || window.event;
            var index = e.target.getAttribute("data-toggle");
            debug_toggle(index);
            //cookie保存
            document.cookie = "paper_debug_toggle=" + index + ";path=/";
        };
    }

    if (parseInt(getCookie('paper_debug_close')) === 1) {
        document.querySelector('.app-debug-trace').style.display = 'none';
        document.querySelector('.app-debug-mini').style.display = 'block';
    } else {
        document.querySelector('.app-debug-trace').style.display = 'block';
        document.querySelector('.app-debug-mini').style.display = 'none';
    }

    if (getCookie("paper_debug_toggle") !== null) {
        debug_toggle(getCookie("paper_debug_toggle"));
    }


</script>
